<!--
 * @Author: your name
 * @Date: 2020-12-28 17:53:01
 * @LastEditTime: 2020-12-29 14:27:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \basicvue\vuehtml\vueindex.html
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/common.css">
    <link rel="stylesheet" href="../assets/css/vue.css">
    <script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
    <a href="../index.html" class="retu">BACK</a>
    <h1>v-template模板</h1>
    <span>{{message}}</span>

    <template id="demo2">
        <h1 style="color:red;">我是template模板</h1>
    </template>

    <template type="x-template" id="demo3">
        <h2 style="color:red;">我是script模板</h2>
    </template>
</div>
<script>
    //声明模板有三种方式
    //1:直接在template中直接声明
    //2:直接在外部使用template标签声明的模板
    //3:在外部使用script标签引入
    let app = new Vue({
        el : '#app',
        data:{
            message:'hello Vue'
        },
        //可以直接编写在vue对象中
        // template:`
        //     <h1 style="color: red;">我是选项模板</h1>
        // `

        //写在template标签中的模板
        // template:'#demo2'

        //写在script标签中的模板
        template:"#demo3"

    });
</script>
</body>
</html>